// 防抖
/* 函数防抖是常见的项目交互优化方式，
就是指触发事件后，
在 n 秒内函数只能执行一次，
如果触发事件后在 n 秒内又触发了事件，
则会重新计算函数延执行时间。
此功能用法一致，也可根据自己需求稍作修改
不传默认设置500ms
*/
import type { Directive, DirectiveBinding } from 'vue';
interface ElType extends HTMLElement {
  __handleClick__: () => any;
}

const debounce: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    if (typeof binding.value !== 'function') {
      return;
    }

    const duration = binding.arg ? parseInt(binding.arg) : 500;
    let timer: any = null;
    el.__handleClick__ = function () {
      if (timer) {
        clearInterval(timer);
      }

      timer = setTimeout(() => {
        binding.value();
      }, duration);
    };

    el.addEventListener('click', el.__handleClick__);
  },
  beforeUnmount(el: ElType) {
    el.removeEventListener('click', el.__handleClick__);
  }
};

export default debounce;
